<template>
  <div>
    <el-table-form ref="form" :model="form">
      <el-form-item label="外呼号码:" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入外呼号码" clearable />
      </el-form-item>
      <el-form-item label="外呼编号:" prop="callCode">
        <el-input v-model="form.callCode" placeholder="请输入外呼编号" clearable />
      </el-form-item>
      <el-form-item label="呼叫人:" prop="callerName">
        <el-input v-model="form.callerName" placeholder="请输入呼叫人" clearable />
      </el-form-item>
      <el-form-item label="呼叫时间:" :table-form-merge="2">
        <el-date-picker
          v-model="form.startDt"
          type="datetimerange"
          class="date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="呼叫状态:">
        <el-select v-model="form.callOutStatus" placeholder="请选择" clearable>
          <el-option
            v-for="item in settlesStatusList"
            :key="item.callStatus"
            :label="item.statusName"
            :value="item.callStatus"
          />
        </el-select>
      </el-form-item>

      <template v-slot:btns>
        <el-button v-permission="1" type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </template>
    </el-table-form>
    <div class="exportBtn">
      <el-button v-permission="3" icon="el-icon-download" @click="exportTableData">导出</el-button>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{bottomOffset:15}"
      border
      stripe
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      highlight-current-row
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <call-details
      ref="callDetails"
      :call-details="callDetailsList"
      :pbx-url="pbxUrl"
    />
  </div>
</template>

<script>
  import { parseTime } from '@/utils'
  import dayjs from 'dayjs'
  import callDetails from './callDetails.vue'
  import { transactor, getCompanyCode, getExportAddress, queryRecordInfo, callRecordOutExport } from '@/api'
  export default {
    name: 'outgoingCall',
    components: { callDetails },
    data() {
      return {
        form: {
          phone: null, // 电话号码
          callerName: null,
          startDt: [dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '00:00:00',
                    dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '23:59:59'],
          callOutStatus: null, //
          corpCode: null, // 所属企业
          callCode: ''
        },
        answerList: [], // 接听人下拉框
        cropList: [],
        pbxUrl: '',
        callDetailsList: {
          recordInfo: {}
        },
        settlesStatusList: [
          { callStatus: 1,
            statusName: '正常' },
          { callStatus: 2,
            statusName: '占线  ' },
          { callStatus: 3,
            statusName: '未接听' },
          { callStatus: 4,
            statusName: '通话中' }
        ],
        formData: {},
        tableData: {
          data: [],
          total: 0,
          column: [
            {
              prop: 'callCode',
              label: '外呼编号',
              minWidth: 140
            },
            {
              prop: 'phone',
              label: '外呼号码',
              minWidth: 110
            },
            {
              prop: 'startDt',
              label: '呼叫时间',
              minWidth: 120,
              render: (h, { row }) => <span>{ row.startDt ? parseTime(row.startDt) : '' }</span>
            },
            {
              prop: 'num',
              label: '坐席号',
              minWidth: 100
            },
            {
              prop: 'callerName',
              label: '话务员',
              minWidth: 80
            },
            {
              prop: 'callOutStatus',
              label: '呼叫状态',
              formatter: (row) => {
                return row.callOutStatus === 1 ? '正常' : row.callOutStatus === 2 ? '占线' : row.callOutStatus === 3 ? '未接听' : row.callOutStatus === 4 ? '通话中' : ''
              },
              minWidth: 80
            },
            {
              label: '操作',
              width: 100,
              fixed: 'right',
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-button
                      v-permission='2'
                      type='text'
                      onClick={() => this.getdetail(row, $index)}
                    >
                     查看详情
                    </el-button>
                  </div>
                )
              }
            }
          ]
        }
      }
    },
    created() {
      this.getAnswer()
      this.getCompanyCode()
    },
    methods: {

      async getAnswer() {
        const res = await transactor()
        if (res && res.status === 200 && res.data) {
          this.answerList = res.data
        }
      },
      async getCompanyCode() {
        const res = await getCompanyCode()
        if (res && res.status === 200 && res.data) {
          this.cropList = res.data
        }
      },
      async fetchData({ currentPage, pageSize }) {
        const params = {
          pageIndex: currentPage,
          pageSize: pageSize,
          params: {
            phone: this.form.phone || null,
            startDt: this.form.startDt.length > 0 ? this.form.startDt[0] : '',
            startDtEnd: this.form.startDt.length > 0 ? this.form.startDt[1] : '',
            callerName: this.form.callerName || null,
            callOutStatus: this.form.callOutStatus,
            callCode: this.form.callCode
          }
        }

        params.params = JSON.stringify(params.params)
        const res = await queryRecordInfo(params)
        if (res && res.status === 200 && res.data) {
          this.tableData.data = res.data.rows
          this.tableData.total = res.data.total
        }
      },
      async exportTableData() {
        this.$confirm('确定导出数据?', '提示', {
          type: 'warning'
        }).then(async() => {
          const baseUrl = await getExportAddress()
          if (baseUrl && baseUrl.data) {
            const params = {
              phone: this.form.phone || null,
              startDt: this.form.startDt.length > 0 ? this.form.startDt[0] : '',
              startDtEnd: this.form.startDt.length > 0 ? this.form.startDt[1] : '',
              callerName: this.form.callerName || null,
              callOutStatus: this.form.callOutStatus,
              callCode: this.form.callCode
            }

            const res = await callRecordOutExport(params)
            if (res && res.data) {
              const key = res.data.key
              const url = `${baseUrl.data.exportAddress}/page/export/frame?key=${key}`
              window.open(url)
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          })
        })
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      reset() {
        this.form.phone = null
        this.form.callerName = null
        this.form.callOutStatus = null
        this.form.startDt = [dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '00:00:00',
                             dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '23:59:59']
        this.form.callCode = ''
        this.search()
      },
      async getdetail(row) {
        row.callType = 'out'
        if (row) {
          this.callDetailsList.recordInfo = row
          await this.$refs.callDetails.open()
        }
      }
    }

  }
</script>

<style>
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
  display: none;
}
.exportBtn {
  margin-bottom: 10px;
}
</style>
